<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>烟花爆炸效果</title>
</head>
<style>
    
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body{
        height: 100vh;
        overflow: hidden;
    }
    .btn{
        /* width: 100px;
        height: 100px;
        border-radius: 30px;
        background-color: aqua; */

    }
    .content{
        height: 0;
    }
</style>
<body>
    <div class="btn">
        hover me
        <div class="detail">
            <div class="content">
                <div class="inner">
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit fugiat 
                    corrupti voluptas id, ab inventore perferendis, nam, laborum culpa ea qui
                    quibusdam officia. Nam hic eum, et totam beatae natus.
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laborum rerum fuga dolore quas a accusantium.
                    Vero autem illum optio molestiae, facere repellendus, iure non consequuntur veniam,
                    dignissimos doloremque officiis minima.
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident mollitia repellendus, error dolores optio fugit
                     maxime perspiciatis eaque quisquam eligendi praesentium repellat saepe laboriosam dicta deserunt quae incidunt cumque ipsa!
                </div>
            </div>
        </div>
    </div>
</body>
<script>

</script>